<template>
  <div class="tscxbox">
    <echartCompt class="tscxbox-chart" v-model="chartOption" />
  </div>
</template>


<script>
import titleCompt from "@/views/金四决策指挥平台/components/titleCompt";
export default {
  components: {
    titleCompt,
  },
  props: {},
  data() {
    return {
      rowData: [], // 图表的数据
      jjlxData:[
        {
          name: "国有和集体企业",
          value: 20,
        },
        {
          name: "外资经济",
          value: 30,
        },
        {
          name: "民营经济",
          value: 15,
        },
        {
          name: "其他经济类型",
          value: 10,
        },
      ],
    };
  },
  watch: {
    condData() {
      // 监听当条件发生切换时，执行数据查询
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {
    chartOption() {
      let _this = this;
      let option = {
        grid: {},
        legend: {
          orient: "vertical",
          top: 20,
          left: 10,
          textStyle: {
            color: "#fff",
            fontSize: 22,
          },
          show: true,
        },
        tooltio: {
          trigger: "item",
        },
        series: [
          {
            name: "分产业",
            type: "pie",
            color: ["#01fdfe", "#ff5f67", "#ffd006", "#51af51"],
            radius: ["0%", "60%"],
            center: ["60%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 3,
              //borderColor: '#fff',
              borderWidth: 1,
            },
            label: {
              show: true,
              formatter: "{b} \n {d} %",
              fontSize: 22,
              color: "#fff",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "24",
                fontWeight: "bold",
                color: "#fff",
              },
            },
            data: _this.jjlxData,
          },
        ],
      };
      return option;
    },
    condData() {},
    sql() {
      let sql = ``;
      return sql;
    },
  },

  methods: {
    init() {
      this.getData();
    },

    getData() {
      // 查询图表数据
      // this.ajax({
      //   sql: this.sql,
      //   sqlTip: "产业结构税收分析",
      // }).then((res) => {
      //   this.rowData = res;
      //   // console.log(JSON.stringify(res));
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.tscxbox {
  height: 100%;
  text-align: left;
  &-chart {
    height: calc(100%);
  }
}
</style>
